define(

    [ 'jquery', 'underscore', 'backbone', 'util', 'threeJsObjs/scene', 'threeJsObjs/minecraftPlayer', 'config/minecraftPlayerConfig', 'text!templates/createCharacter.html' ],
            
    function( $, _, Backbone, util, Scene, MinecraftPlayer, minecraftPlayerConfig, createCharacterTemplate ) {

        var CreateCharacterView = Backbone.View.extend( {
        
            el: $('#container'),

            initialize: function() {

                this.render();

                this.gatherSizeInformation();

                this.addSizeToElements();

                //this.add3dCharacter();
                this.addMinecraftCharacter();
            },

            render: function() {

                var data = {

                    width: util.windowWidth,
                    height: util.windowHeight,
                    backgroundImageSource: util.getStaticImageUrl( 'belmont.jpg' ),
                };

                this.dom = $( _.template( createCharacterTemplate, data ) );

                this.$el.append( this.dom );
            },

            gatherSizeInformation: function() {

                this.headerHeight = $('#header').outerHeight( true );
                this.threeJsWidth = $('#threeJsInner').outerWidth( true );
                this.contentHeight = util.windowHeight - this.headerHeight;
            },

            addSizeToElements: function() {

                $('#content').height( this.contentHeight );

            },

            addMinecraftCharacter: function() {

                this.minecraftPlayer =
                    new MinecraftPlayer( minecraftPlayerConfig );

                this.canvasScene =
                    new Scene( { 
                        el: $('#threeJsInner'),
                        camera: { position: { x:0, y:10, z:350 } },
                        viewAngle: 6,
                        width: this.threeJsWidth,
                        height: this.contentHeight,
                        near: 0.1,
                        far: 20000 } )
                            .addToScene( { obj: this.minecraftPlayer.playerObj,
                                           render: function( obj ) { obj.rotation.y = -( this.time * 0.9 ); },
                                           lookAt: true } ).animate();
        },

            add3dCharacter: function() {
                
                this.threeD = {

                    clock: new THREE.Clock(),
                    scene: new THREE.Scene(),
                    viewAngle: 6,
                    aspect: this.threeJsWidth / this.contentHeight,
                    near: 0.1,
                    far: 2000,
                    colladaLoader: new THREE.ColladaLoader()
                };


                this.threeD.camera =
                    new THREE.PerspectiveCamera( this.threeD.viewAngle,
                                                 this.threeD.aspect,
                                                 this.threeD.near,
                                                 this.threeD.far );

                this.threeD.scene.add( this.threeD.camera );

                this.threeD.camera.position.set( 0, 10, 350 );

                this.threeD.renderer = ( Detector.webgl )
                    ? new THREE.WebGLRenderer( { antialias: true } )
                    : new THREE.CanvasRenderer()

                this.threeD.renderer.setSize( this.threeJsWidth, this.contentHeight );
                        
                THREEx.WindowResize( this.threeD.renderer, this.threeD.camera );

                this.threeD.colladaLoader.options.convertUpAxis = true;

                this.on( 'characterLoaded', this.animateCharacter );
                     
                this.threeD.daeCount = 0;
                this.frolfer = { };
                this.frolferArm = { };

                //this.threeD.colladaLoader.load( util.getStaticModelUrl( 'Frofler3D_NoLeftArm' ), $.proxy( this.colladaLoadSuccess, this, { model: 'frolfer' } ) );
                this.threeD.colladaLoader.load( util.getStaticModelUrl( 'Frofler3D_ARM' ), $.proxy( this.colladaLoadSuccess, this, { model: 'frolferArm' } ) );

                this.addLights();
               
                $('#threeJsInner').append( this.threeD.renderer.domElement );
            
            },

            addLights: function() {
            
                this.threeD.particleLight =
                    new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ),
                                    new THREE.MeshBasicMaterial( { color: 0xffffff } ) );

                this.threeD.scene.add( this.threeD.particleLight );

                this.threeD.scene.add( new THREE.AmbientLight( 0xcccccc ) );

                this.threeD.directionalLight = new THREE.DirectionalLight( 0xeeeeee );
                this.threeD.directionalLight.position.x = Math.random() - 0.5;
                this.threeD.directionalLight.position.y = Math.random() - 0.5;
                this.threeD.directionalLight.position.z = Math.random() - 0.5;
                this.threeD.directionalLight.position.normalize();
                
                this.threeD.scene.add( this.threeD.directionalLight );

                this.threeD.pointLight = new THREE.PointLight( 0xffffff, 4 );
                this.threeD.pointLight.position = this.threeD.particleLight.position;
                this.threeD.scene.add( this.threeD.pointLight );
            },

            colladaLoadSuccess: function ( e, collada ) {

                    if( e.model == 'frolfer' ) {

                        this.frolfer = collada.scene;
                        //this.frolfer.skin = collada.skins[0];
                        this.frolfer.scale.x = this.frolfer.scale.y = this.frolfer.scale.z = .2;
                        this.frolfer.updateMatrix();
                    } else {

                        this.frolferArm = collada.scene;
                        //this.frolfer.skin = collada.skins[0];
                        this.frolferArm.scale.x = this.frolferArm.scale.y = this.frolferArm.scale.z = .2;
                        this.frolferArm.updateMatrix();

                    }
                    

                    this.threeD.daeCount++;

                    if( this.threeD.daeCount == 1 ) {

                        //this.threeD.dae = collada.scene;
                        //this.threeD.dae = this.threeD.dae.children[0].children[1].children[0].children[2];
                        //this.threeD.skin = collada.skins[0];

                        //this.threeD.dae.position.set( 0, 25.1, 0 ); 

                        //this.frolfer.position.set( 0, 25.1, 0 ); 
                        this.frolferArm.position.set( 0, 25.1, 0 ); 

                        //this.threeD.scene.add( this.frolfer );
                        this.threeD.scene.add( this.frolferArm );
                        
                        this.threeD.camera.lookAt( this.frolferArm.position );

                        this.threeD.camera.updateProjectionMatrix();

                        this.trigger( 'characterLoaded' );

                        test = { };
                        test.arm = this.frolferArm;
                        //test.frolfer = this.frolfer;

                    }
            },

            animateCharacter: function() {

                requestAnimationFrame( $.proxy( this.animateCharacter, this ) );

                this.renderCharacter();       

                this.updateCharacter();
            },

            renderCharacter: function() {

                var time = ( Date.now() - this.threeD.clock.startTime ) / 1000;

                var pos = time * 0.5;
                
                //this.frolfer.rotation.y = -( pos );
                this.frolferArm.rotation.y = -( pos );
                
                this.threeD.renderer.render( this.threeD.scene, this.threeD.camera );
            },

            updateCharacter: function() {
            }

        } );
                                                              
        return CreateCharacterView;
    }
);
